<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>潮聚</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<link rel="stylesheet" th:href="@{css/mui.min.css}"/>
		<link rel="stylesheet" th:href="@{css/common.css}"/>
		<link rel="stylesheet" th:href="@{css/icons-extra.css}"/>
		<link rel="stylesheet" th:href="@{css/mui.picker.css}"/>
		<link rel="stylesheet" th:href="@{css/mui.poppicker.css}"/>
	</head>
	<body>
		<!--头部导航栏 start---->
		<header id="header" class="mui-bar mui-row mui-bar-transparent" >
			<div class="mui-row">
				<div class=" mui-col-xs-2 mui-col-sm-2">
					<button  id ="showCityPicker" class=" mui-btn  mui-btn-link mui-btn-nav mui-pull-left cj-text-color-gray cj-text-weight">
					&nbsp;<span id="city">南宁</span><span class="mui-icon mui-icon-arrowdown cj-text-size-18"></span>
					</button>
				</div>
				<div class="mui-col-xs-10 mui-col-sm-10">
					<div class="mui-input-row mui-search">
						<input id="search" type="search" class="mui-input-clear " placeholder="搜素">
					</div>
				</div>

			</div>
		</header>
		<!--头部导航栏 end---->
		<!--轮播 start---->
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="img/003.jpg"/>
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/001.jpg"/>
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/002.jpg"/>
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/003.jpg"/>
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/001.jpg"/>
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="img/003.jpg"/>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<!--轮播end---->

			<!--推荐公告 start---->
			<div class="mui-card cj-margin-0 cj-text-carousel-card">
				<div class="mui-card-header mui-card-media">
					<img class="cj-icon-home-article" src="img/icon-home-article.png">
					<div class="mui-media-body">
						<ul class="cj-text-carousel ">
							<li class="cj-text-carousel-item ">
								<a title="公告推荐1" href="#" class="cj-text-color-gray">第一条公告推荐...</a>
							</li>
							<li class="cj-text-carousel-item">
								<a title="公告推荐2" href="#" class="cj-text-color-gray">第二条公告推荐...</a>
							</li>
							<li class="cj-text-carousel-item">
								<a title="公告推荐3" href="#" class="cj-text-color-gray">第三条实在编不下去了...</a>
							</li>
						</ul><br/>
					</div>
				</div>
			</div>
			<!--推荐公告 end---->

			<!--九宫格 start---->
			<div class="cj-line-5"></div>
			<div id="slider2" class="mui-slider cj-bg-white">
				<div class="mui-slider-group cj-bg-white">

					<div class="mui-slider-item">
						<ul class="mui-table-view mui-grid-view mui-grid-9 cj-bg-white cj-none-border">
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 cj-none-border cj-padded-0">
								<a href="#">
									<img class="mui-icon cj-icon-size-40" src="img/icon-1.png">
									<div class="mui-media-body">套餐</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 cj-none-border cj-padded-0">
								<a href="/talent">
									<img class="mui-icon cj-icon-size-40" src="img/icon-2.png">
									<div class="mui-media-body">达人服务</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 cj-none-border cj-padded-0">
								<a href="#">
									<img class="mui-icon cj-icon-size-40" src="img/icon-3.png">
									<div class="mui-media-body">定制</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 cj-none-border cj-padded-0">
								<a href="#">
									<img class="mui-icon cj-icon-size-40" src="img/icon-4.png">
									<div class="mui-media-body">聚会商城</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 cj-none-border cj-padded-0">
								<a href="/site">
									<img class="mui-icon cj-icon-size-40" src="img/icon-5.png">
									<div class="mui-media-body">场地</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 cj-none-border cj-padded-0">
								<a href="/site">
									<img class="mui-icon cj-icon-size-40" src="img/icon-6.png">
									<div class="mui-media-body">餐饮</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 cj-none-border cj-padded-0">
								<a href="goods/personSerives/">
									<img class="mui-icon cj-icon-size-40" src="img/icon-7.png">
									<div class="mui-media-body">布置</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 cj-none-border cj-padded-0">
								<a href="/talent/car">
									<img class="mui-icon cj-icon-size-40" src="img/icon-8.png">
									<div class="mui-media-body">交通</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="mui-card cj-margin-0 cj-heigeht-1">
				<div class="mui-card-content">
					&nbsp;
				</div>
			</div>
		
			
			<!--推荐列表  start---->
			
			<div class="mui-card-content">

				<div class="mui-card ">
				<img onclick="go('goods/goodsDetail.html')" src="img/card-1.jpg" alt="" width="100%"/>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						
						<p onclick="go('goods/goodsDetail.html')"  class="cj-text-size-14 cj-text-weight">惠州十里银滩 私享纯净旖旎海岸</p>
						<p>
							<span class="mui-badge mui-badge-primary">毗邻景区</span>
							<span class="mui-badge mui-badge-primary">私人花园</span>
							<span class="mui-badge mui-badge-primary">海景度假</span>
							<span class="mui-badge mui-badge-primary">豪华装修</span>
						</p>
					</div>
				</div>
				</div>
				
				
				<div class="mui-card-content">
					<div class="mui-card ">
					<img onclick="go('goods/goodsDetail.html')" src="img/card-2.jpg" alt="" width="100%"/>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<p onclick="go('goods/goodsDetail.html')"  class="cj-text-size-14 cj-text-weight">惠州双月湾 美丽的海港小镇</p>
							<p>
								<span class="mui-badge mui-badge-primary">毗邻景区</span>
								<span class="mui-badge mui-badge-primary">私人花园</span>
								<span class="mui-badge mui-badge-primary">海景度假</span>
								<span class="mui-badge mui-badge-primary">豪华装修</span>
							</p>
						</div>
					</div>
					</div>
				</div>
				
				
				<div class="mui-card-content">
					<div class="mui-card ">
					<img onclick="go('goods/goodsDetail.html')"  src="img/card-3.jpg" alt="" width="100%"/>
					<div class="mui-card-content ">
						<div class="mui-card-content-inner ">
							<p onclick="go('goods/goodsDetail.html')"  class="cj-text-size-14 cj-text-weight">佛冈碧桂园 叹半山奢华度假别墅</p>
							<p>
								<span class="mui-badge mui-badge-primary">毗邻景区</span>
								<span class="mui-badge mui-badge-primary">私人花园</span>
								<span class="mui-badge mui-badge-primary">海景度假</span>
								<span class="mui-badge mui-badge-primary">豪华装修</span>
							</p>
						</div>
					</div>
					</div>
				</div>
			</div>
			<div class="cj-line-20"></div>
			<div class="cj-line-20"></div>
			<div th:include="common/footer :: nav"></div>
			<!--推荐列表  end---->
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/city.data.js"></script>
		<script src="js/textslideup.js"></script>
		<script type="text/javascript">
			//图片轮播
			var slider = mui("#slider");
			slider.slider({
				interval: 500,
			});
			//文字滚动
			$(".cj-text-carousel").slideUp();
			
			var cityPicker = new mui.PopPicker({layer: 2});
					cityPicker.setData(cityData);
					var showCityPickerButton = document.getElementById('showCityPicker');
					var city = document.getElementById("city")
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							city.innerText = items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
			}, false);

			var search = document.getElementById("search");
			search.onfocus = function(){
				location.href = 'search/';
			};
		</script>

	</body>

</html>
